<template>
  <div class="dashboard-page">
    <aside class="sidebar">
      <div class="profile-card">
        <img class="avatar" :src="adminAvatar" alt="Sarah Smith" />
        <div class="profile-info">
          <span class="name">Sarah Smith</span>
          <span class="role">Admin</span>
        </div>
      </div>

      <nav class="sidebar-menu">
        <template v-for="item in menu" :key="item.label">
          <RouterLink
            v-if="item.path"
            :to="item.path"
            :class="['menu-item', item.active && 'active']"
          >
            <i :class="['menu-icon', item.icon]"></i>
            <span>{{ item.label }}</span>
          </RouterLink>
          <button v-else :class="['menu-item', item.active && 'active']">
            <i :class="['menu-icon', item.icon]"></i>
            <span>{{ item.label }}</span>
          </button>
        </template>
      </nav>
    </aside>

    <main class="main-content">
      <header class="main-header">
        <div class="brand">
          <img :src="hospitalLogo" class="brand-logo" alt="Hospital Logo" />
          <div>
            <h1 class="page-title">Menu</h1>
            <p>选择模块查看前端页面效果</p>
          </div>
        </div>

        <div class="header-actions">
          <button class="icon-btn"><i class="ri-notification-3-line"></i></button>
          <button class="icon-btn"><i class="ri-settings-3-line"></i></button>
        </div>
      </header>

      <section class="overview-banner">
        <div>
          <h2>智慧医疗内容管理演示</h2>
          <p>以下页面基于 Figma 设计稿完成静态还原，可直接点击跳转查看效果。</p>
        </div>
        <div class="overview-stats">
          <div class="pill">
            <span class="pill-value">4</span>
            <span class="pill-label">模块页面</span>
          </div>
          <div class="pill">
            <span class="pill-value">静态</span>
            <span class="pill-label">示例数据</span>
          </div>
        </div>
      </section>

      <section class="menu-grid">
        <router-link
          v-for="card in moduleCards"
          :key="card.title"
          :to="card.route"
          class="module-card"
        >
          <div class="module-icon" :class="card.accent">
            <i :class="card.icon"></i>
          </div>
          <div class="module-copy">
            <h3>{{ card.title }}</h3>
            <p>{{ card.subtitle }}</p>
          </div>
          <span class="module-arrow">→</span>
        </router-link>
      </section>
    </main>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

const adminAvatar = 'https://i.pravatar.cc/100?img=48'
const hospitalLogo =
  "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'><defs><linearGradient id='a' x1='0%' y1='0%' x2='100%' y2='100%'><stop offset='0%' stop-color='%23ff86d5'/><stop offset='100%' stop-color='%23907cff'/></linearGradient></defs><rect x='4' y='4' width='56' height='56' rx='18' fill='%23ffffff' stroke='url(%23a)' stroke-width='4'/><path d='M32 14c9.9 0 18 8.1 18 18s-8.1 18-18 18S14 41.9 14 32 22.1 14 32 14zm0 6a12 12 0 100 24 12 12 0 000-24zm1.5 5v5.5H39v3H33.5V39h-3v-5.5H25v-3h5.5V25h3z' fill='url(%23a)'/></svg>"

const sidebarMenu = [
  { label: 'Menu', icon: 'ri-compass-3-line', path: '/' },
  { label: 'Dashboard', icon: 'ri-dashboard-2-line', path: '/dashboard' },
  { label: 'Patient Form', icon: 'ri-calendar-check-line', path: '/patient-form' },
  { label: 'Patient Profile', icon: 'ri-user-3-line', path: '/patient-profile' },
  { label: 'Payment', icon: 'ri-bill-line', path: '/payment-table' },
  { label: 'Reports', icon: 'ri-bar-chart-2-line', path: null },
  { label: 'Pharmacy', icon: 'ri-capsule-line', path: null },
  { label: 'Settings', icon: 'ri-equalizer-line', path: null },
  { label: 'Logout', icon: 'ri-shut-down-line', path: null },
]

const menu = computed(() =>
  sidebarMenu.map((item) => ({
    ...item,
    active: item.path === route.path,
  }))
)

const moduleCards = [
  {
    title: '仪表盘 Dashboard',
    subtitle: '查看统计卡片、图表与预约概览',
    route: '/dashboard',
    icon: 'ri-dashboard-2-line',
    accent: 'accent-one',
  },
  {
    title: '患者录入 Patient Form',
    subtitle: '填写患者基础信息及上传资料',
    route: '/patient-form',
    icon: 'ri-file-list-3-line',
    accent: 'accent-two',
  },
  {
    title: '患者档案 Patient Profile',
    subtitle: '浏览患者历史就诊与体征报告',
    route: '/patient-profile',
    icon: 'ri-user-3-line',
    accent: 'accent-three',
  },
  {
    title: '缴费列表 Payment Table',
    subtitle: '查看缴费明细表格与筛选操作',
    route: '/payment-table',
    icon: 'ri-bill-line',
    accent: 'accent-four',
  },
]
</script>

<style scoped>
@import './shared-dashboard.css';

.overview-banner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 28px;
  padding: 28px 32px;
  box-shadow: var(--soft-shadow);
}

.overview-banner h2 {
  margin: 0 0 8px;
  font-size: 24px;
}

.overview-banner p {
  margin: 0;
  color: var(--text-muted);
}

.overview-stats {
  display: flex;
  gap: 16px;
}

.pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: rgba(248, 249, 255, 0.9);
  border-radius: 18px;
  padding: 12px 22px;
  box-shadow: inset 0 1px 2px rgba(31, 39, 79, 0.06);
}

.pill-value {
  font-weight: 700;
  color: var(--text-body);
}

.pill-label {
  font-size: 12px;
  color: var(--text-muted);
}

.menu-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.module-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 28px;
  border-radius: 28px;
  text-decoration: none;
  color: inherit;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: var(--soft-shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.module-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 50px rgba(66, 44, 123, 0.18);
}

.module-icon {
  width: 58px;
  height: 58px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  font-size: 26px;
  color: #fff;
}

.accent-one {
  background: linear-gradient(135deg, #ff9bb0, #ff6adf);
}

.accent-two {
  background: linear-gradient(135deg, #6dd3ff, #907bff);
}

.accent-three {
  background: linear-gradient(135deg, #7de2a7, #55c9a4);
}

.accent-four {
  background: linear-gradient(135deg, #f7b06a, #ff8c68);
}

.module-copy h3 {
  margin: 0 0 6px;
  font-size: 18px;
}

.module-copy p {
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
}

.module-arrow {
  margin-left: auto;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-muted);
}
</style>

